<template>
  <div class="pageLogin">
    <LoginHead>欢迎登陆</LoginHead>
    <div class="cenSection">
      <div class="wrapper">
        <nav class="nav">
          <a href="javascript:;">账户登陆</a>
          <a href="javascript:;">扫码登陆</a>
        </nav>
        <!-- 账户登陆 -->
        <loginform></loginform>
      </div>

    </div>
    <Loginfoot></Loginfoot>
  </div>
</template>
<script>
import LoginHead from './components/login-header.vue'
import Loginfoot from './components/login-footer.vue'
import loginform from './components/login-form.vue'

// ref函数仅能监听基本类型的变化，不能监听复杂类型的变化（比如对象、数组）
// 监听复杂类型的变化可以使用reactive函数
// import { ref, reactive } from 'vue' // reactive,
export default {
  name: 'pageLogin',
  components: { LoginHead, Loginfoot, loginform }
}
</script>
<style lang="less">
.pageLogin {
  .cenSection {
    height: 488px;
    width: 100%;
    background: url("~@/assets/image/login-bg.png");
    position: relative;
  }
  .wrapper {
    width: 381px;
    height: 402px;
    position: absolute;
    right: 475px;
    bottom: 35px;
    background-color: #fff;
    .nav {
      border-bottom: 1px solid #f5f5f5;
      height: 50px;
      line-height: 50px;
      font-size: 18px;
      display: flex;
      justify-content: space-between;
      padding: 0 37px;
      a:nth-child(1) {
        color: #27ba9b;
        font-weight: 700;
      }
    }
  }
}
</style>
